<template>
	<div class="recommend">
		<div class="recommend-title">热销推荐</div>
		<ul>
			<router-link tag="li" class="item" v-for="item in recommend" :key="item.id" 
			:to="'/detail/'+item.id"
			>
					<img class="item-img" :src="item.imgUrl" alt="">
				<div class="item-info">
					<p class="item-title">{{item.title}}</p>
					<p class="item-desc">{{item.desc}}</p>
					<button class="item-button">了解详情</button>
				</div>
			</router-link>
		</ul>
	</div>
</template>
<script>
export default{
	props:{
		recommend:Array
	},
	data(){
		return{
		
		}
	}
}
</script>
<style lang="scss" scoped>
@import '~@/assets/styles/base.scss';
.recommend-title{
	margin-top:px2rem(10px);
	height:px2rem(20px);
	line-height: px2rem(20px);
	background: #ccc;
	text-indent:1em;
	font-size: px2rem(8px);
	color:#777;
}
.item{
	display: flex;
	height:px2rem(94px);
	/*border-bottom: 1px solid red;*/
}
.item-img{
	width:px2rem(70px);
	height:px2rem(70px);
	padding:px2rem(10px);
}
.item-info{
	flex: 1;
	font-size: px2rem(8px);
	padding:px2rem(10px);
	min-width: 0;
}
.item-title{
	font-size: px2rem(16px);
	overflow: hidden;
	white-space: normal;
	text-overflow: ellipsis;
}
.item-title,.item-desc{
	line-height:px2rem(24px); 
	
}
.item-desc{
	color:#777;
}
.item-button{
	margin-top:px2rem(5px);
	background-color: #ff9300;
	border:none;
	border-radius: px2rem(3px);
	font-size: px2rem(7px);
	color:#fff;
	
}
</style>